<script lang="ts" setup>
import type { PlusColumn } from 'plus-pro-components'
import type { VxeGridProps } from 'vxe-table'

import { useEditProduct, useGetProductInfo } from '@fl/api/supplier'
import { SearchTable, SubmitBtn } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'
import { Editor } from '@fl/origin-components/Editor/index'

import { AUDIT_VALUE } from './constant'

const { createMessage } = useMessage()
const { query } = useRoute()
const router = useRouter()
const form = ref()
type Istate = {
    productDetail: string
}

const state = ref<Istate>({
    productDetail: '',
})

const skuPriceTypeEnum = {
    0: '区间参考价',
    1: '固定参考价',
    2: '固定成交价',
    3: '询价',
}

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 24,
        },
        label: '产品详情图',
        prop: 'productDetail',
    },
]

const gridOptions = reactive<VxeGridProps<any>>({
    align: 'center',
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'skuName', title: 'sku 名称' },
        { field: 'skuAttributeInfo', title: '销售属性' },
        { field: 'productModel', title: '型号' },
        { field: 'skuCount', title: '计量单位数量' },
        { field: 'skuPriceType', slots: { default: 'skuPriceType' }, title: '价格类型' },
        { field: 'skuPrice', slots: { default: 'skuPrice' }, title: '价格' },
        { field: 'skuPriceIntroduce', title: '价格说明' },
    ],
    // data: [],
    height: 550,
    keepSource: true,
    pagerConfig: {
        enabled: false,
    },
    showOverflow: true,
})

const rules = {
    productDetail: [
        { message: '请上传产品详情图', required: true, trigger: 'blur' },
    ],
}

const { data: productInfo, isLoading: productInfoLoading } = useGetProductInfo(query?.id)
const { isPending: isEditProductPending, mutate: EditProductMutate } = useEditProduct()
const isPending = computed(() => productInfoLoading.value || isEditProductPending.value)

watchEffect(() => {
    if (productInfo.value) {
        if (productInfo.value?.productVO?.productAuditStatus === 1) {
            state.value.productDetail = productInfo.value?.productVO?.productDetailWaitAudit
        }
        else {
            state.value.productDetail = productInfo.value?.productVO?.productDetail
        }
    }
})

function transformUrl(url: string) {
    if (!url) {
        return []
    }
    else {
        return url.split(';')
    }
}

function cancel() {
    router.push('/supplier-pages/product-management/list')
}

async function confirm() {
    const data = {
        id: query?.id as string,
        productDetail: state.value.productDetail,
    }
    const valid = await form.value.formInstance.validate()
    if (valid) {
        EditProductMutate(
            data,
            {
                onSuccess: () => {
                    createMessage.success('修改成功')
                    router.push('/supplier-pages/product-management/list')
                },
            },
        )
    }
}
</script>

<template>
    <ElCard shadow="never"
            class="mb-10"
    >
        <div class="text-20 font-500">
            基础信息
        </div>

        <div class="my-20 bg-[var(--el-border-color)] h-1 w-full" />

        <el-row class="mb-20">
            <el-col :span="8">
                <span class="p-lable w-100">产品类目：</span>

                <span>{{ productInfo?.productVO?.categoryPath || '--' }}</span>
            </el-col>

            <el-col :span="8">
                <span class="p-lable w-100">产品名称：</span>

                <span>{{ productInfo?.productVO?.productName || '--' }}</span>
            </el-col>

            <el-col :span="8">
                <span class="p-lable w-100">产品型号：</span>

                <span>{{ productInfo?.productVO?.productModel || '--' }}</span>
            </el-col>
        </el-row>

        <el-row class="mb-20">
            <el-col :span="8">
                <span class="p-lable w-100">购买条件：</span>

                <span>{{ productInfo?.productVO?.productPurchaseConditions || '--' }}</span>
            </el-col>

            <el-col :span="8">
                <span class="p-lable w-100">品牌名称：</span>

                <span>{{ productInfo?.productVO?.brandName || '--' }}</span>
            </el-col>

            <el-col :span="8">
                <span class="p-lable w-100">计量单位：</span>

                <span>{{ productInfo?.productVO?.productUnit || '--' }}</span>
            </el-col>
        </el-row>

        <el-row class="mb-20">
            <el-col :span="8">
                <span class="p-lable w-100">产品证书：</span>

                <span>{{ productInfo?.productVO?.productCertificateName || '--' }}</span>
            </el-col>

            <el-col :span="8">
                <span class="p-lable w-100">产品报告：</span>

                <span>{{ productInfo?.productVO?.productReportName || '--' }}</span>
            </el-col>

            <el-col :span="8">
                <span class="p-lable w-100">是否上架展示：</span>

                <span>{{ productInfo?.productVO?.isShow ? '是' : '否' }}</span>
            </el-col>
        </el-row>

        <el-row class="mb-20">
            <el-col :span="12">
                <span class="p-lable w-100">产品亮点：</span>

                <span>{{ productInfo?.productVO?.productHighlights || '--' }}</span>
            </el-col>
        </el-row>

        <el-row class="mb-20">
            <el-col :span="12">
                <span class="p-lable w-100">产品图片：</span>

                <el-image v-for="url in transformUrl(productInfo?.productVO?.productImage)"
                          :key="url"
                          class="pr-20"
                          :src="url"
                          lazy
                />
            </el-col>
        </el-row>
    </ElCard>

    <ElCard shadow="never"
            class="mb-10"
    >
        <div class="text-20 font-500">
            产品详情图
        </div>

        <div class="my-20 bg-[var(--el-border-color)] h-1 w-full" />

        <PlusForm ref="form"
                  v-model="state"
                  :row-props="{ gutter: 20 }"
                  :col-props="{
                      span: 8,
                  }"
                  label-width="100px"
                  :rules="rules"
                  :columns="columns"
                  :has-footer="false"
        >
            <template #plus-field-productDetail>
                <Editor v-model="state.productDetail"
                        :can-upload-video="false"
                        :height="250"
                />
            </template>
        </PlusForm>
    </ElCard>

    <ElCard shadow="never"
            class="mb-10"
    >
        <div class="text-20 font-500">
            规格属性
        </div>

        <div class="my-20 bg-[var(--el-border-color)] h-1 w-full" />

        <el-row>
            <el-col v-for="(item, index) in productInfo?.productVO?.commonAttributes
                    "
                    :key="index"
                    :span="8"
            >
                <span class="w-100">{{ item.name }}</span>

                ：<span>{{ item.value }}</span>
            </el-col>
        </el-row>
    </ElCard>

    <ElCard shadow="never"
            class="mb-10"
    >
        <div class="text-20 font-500">
            销售属性
        </div>

        <div class="my-20 bg-[var(--el-border-color)] h-1 w-full" />

        <el-row>
            <el-col v-for="(item, index) in productInfo?.productVO?.saleAttributes
                    "
                    :key="index"
                    :span="8"
            >
                <span class="w-100">{{ item.name }}</span>

                ：<span>{{ item.value }}</span>
            </el-col>
        </el-row>
    </ElCard>

    <ElCard shadow="never"
            class="mb-10"
    >
        <div class="text-20 font-500">
            产品SKU
        </div>

        <div class="my-20 bg-[var(--el-border-color)] h-1 w-full" />

        <SearchTable v-bind="gridOptions"
                     :data="productInfo?.productSkuVOS"
        >
            <template #skuPriceType="{ row }">
                <span>{{ skuPriceTypeEnum[row.skuPriceType] }}</span>
            </template>

            <template #skuPrice="{ row }">
                <span>{{ row.skuPrice || '--' }}</span>
            </template>
        </SearchTable>
    </ElCard>

    <div class="mx-auto mt20 flex justify-center">
        <el-button @click="cancel">
            返回
        </el-button>

        <el-button v-if="productInfo?.productVO.productAuditStatus === AUDIT_VALUE.Audit"
                   disabled
        >
            审核中
        </el-button>

        <SubmitBtn v-else
                   type="primary"
                   :loading="isPending"
                   @click="confirm"
        >
            提交
        </SubmitBtn>
    </div>
</template>
